<template>
    <div class="page">
        <navTop title="招商详情"></navTop>
        <div class="parkDetail">
           <div class="parkDetail_img">
                <img v-if="park.thumb === null" src="..//assets/img/640.png" />
                <img v-if="park.thumb !== null" :src="park.thumb" />
           </div> 
           <div class="parkDetail_name">
                <div class="name">{{ park.park_name }}</div>
                <div class="level">市县级</div>
                <div class="browse">
                    <img src="../assets/img/browse.png">
                    <div class="number">865</div>
                </div>
           </div>
            <div class="chain">
                <div class="chain_item" v-for="i in park.chain_name">{{ i }}</div>
            </div>
            <div class="desc">
                <div class="desc_title">园区面积：</div>
                <div class="desc_desc">{{ park.acreage }}{{ park.acreage_unit }}</div>
                <!-- <div class="desc_title">产&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;能：</div>
                <div class="desc_desc">120亿</div> -->
                <div class="desc_title">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：</div>
                <div class="desc_desc">{{ park.city_names }}</div>
            </div>
            <div class="chain_top">
                <div class="chain_top_img">
                    <div class="chain_img">
                        <img src="~@/assets/img/chain/park.png" alt="">
                    </div>
                    <div class="chain_top_title">
                        <div class="chain_name">园区介绍</div>
                    </div>
                </div>
                <div class="chain_desc" :v-html="park.content">
                    <!-- {{ park.content	 }}
                    <div class="icon">
                    <img src="~@/assets/img/chain/down.png">
                    </div> -->
                </div>
            </div>
        </div>
        
        <div class="parkCompany">
            <div class="chain_top_img">
                <div class="chain_img">
                    <img src="~@/assets/img/chain/chain_icon.png" alt="">
                </div>
                <div class="chain_top_title">
                    <div class="chain_name">重点产业</div>
                </div>
            </div>
            <div class="chain_list">
                <div class="chain_item">全部</div>
                <div class="chain_item orige" v-for="item in park.chain_list">{{ item.chain_name }}</div>
            </div>
            
            <div class="statistics_title">
                <div class="statistics_item" v-for="item in companyTotal">{{ item.name }}</div>
                <!-- <div class="statistics_item">规上企业</div>
                <div class="statistics_item">高新技术</div>
                <div class="statistics_item">其他企业</div> -->
            </div>
            <div class="statistics_number">
                <div class="statistics_item" v-for="item in companyTotal"><span>{{ item.total }}</span>家</div>
                <!-- <div class="statistics_item"><span>0</span>家</div>
                <div class="statistics_item"><span>1</span>家</div>
                <div class="statistics_item"><span>2</span>家</div> -->
            </div>
        </div>
        
        <div class="longtouCompany">
            <div class="chain_top_img">
                <div class="chain_img">
                    <img src="~@/assets/img/chain/longtou.png" alt="">
                </div>
                <div class="chain_top_title">
                    <div class="chain_name">龙头企业</div>
                </div>
            </div>
            
            <div class="box_div">
                <van-list
                v-model="isLoad"
                :finished="isfinish"
                finished-text="没有更多了"
                @load="getMore"
                >
                    <template>
                        <companyList :list="list"></companyList>
                    </template>
                </van-list>
            </div>
        </div>
	<div class="h50"></div>
	<bottomDetail></bottomDetail>
    </div>
</template>
<script>
import navTop from '@/components/navTop.vue'
import companyList from '@/components/ssList/companyList.vue'
import bottomDetail from '@/components/chainDetail.vue'
import { company,park } from '@/api/api.js'
export default {
  data() {
    return {
      list:[],
      companyTotal:[],
      park:{},
      total: 0,
      type:1,
      id: 0,
      chain_id:0,
      page: 1,
      isfinish: false,
      isLoad: true,
    }
  },
  components: {
    navTop,
    bottomDetail,
    companyList
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.page = 1
      this.isfinish = false
      this.isLoad = true
      this.id = this.$route.query.id
      this.chain_id = this.$route.query.chain_id
      this.list = []
      this.park = {}
      this.companyTotal = []
      this.getPark()
      this.getCompanyTotal()
      this.getList()
    },
    changeTitle(type) {
      this.type = type
      this.init()
    },
    getPark() {
      park.getDetail({id:this.$route.query.id}).then(res => {
        res.data.chain_name = res.data.chain_names.split(',')
        this.park = res.data
      })
    },
    getMore() {
      if (this.isfinish||this.list.length==0) {
        return
      }
      this.page++
      this.getList()
    },
    getCompanyTotal() {
      let data = {
        park_id:this.id,
      }
      company.getTotalOnlabelData({...data}).then(res => {
        this.companyTotal = res.data
      })
    },
    getList() {
      let data = {
        page: this.page,
        chain_id:this.chain_id,
        park_id:this.id,
        ...this.query
      }
      company.getList({...data}).then(res => {
        this.isLoad = false
        this.list.push(...res.data.data)
        this.total = res.data.total
        if (this.list.length >= this.total) {
          this.isfinish = true
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.page{
    height:100%;
    width:100%;
    background: #F4F4F4;
    .parkDetail{
        background-color: #fff;
        width: calc(100% - 10px);
        margin: 5px;
        height: auto;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        .parkDetail_img {
            width: 100%;
            img {
                width: 100%;
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }
        }
        .parkDetail_name {
            display: flex;
            flex-wrap: nowrap;
            padding: 10px 10px;
            .name {
                font-family: PingFang-SC-Bold;
                font-size: 24px;
                width: 65%;
            }
            .level {
                font-family: PingFang-SC-Regular;
                font-size: 12px;
                color:#FF7A7A;
                background: rgba(255,122,122,0.1);
                border-radius: 6px;
                padding: 2px 15px;
                line-height: 20px;
                height: 20px;
                margin-top: 5px;
            }
            .browse {
                font-family: PingFang-SC-Regular;
                font-size: 12px;
                color:#666;
                margin-left: 10px;
                display: flex;
                margin-top: 5px;
                img{
                    width: 20px;
                    height: 20px;
                }
                .number {
                    line-height: 20px;
                    margin-left: 5px;
                }
            }
        }
        .chain{
            display: flex;
            flex-wrap: wrap;
            font-size: 12px;
            color:#FA871E;
            padding: 0 10px;
            .chain_item{
                background: rgba(250,135,30,0.1);
                border-radius: 6px;
                padding: 4px 10px;
                margin: 0 5px 0 0;
            }
        }
        .desc{
            display: flex;
            flex-wrap: wrap;
            margin: 15px 5px 5px 5px;
            background: #F0F8FF;
            border-radius: 6px;
            font-size: 13px;
            font-family: PingFang-SC-Regular;
            padding: 10px 15px;
            .desc_title{
                height: 25px;
                width: 22%;
            }
            .desc_desc{
                width: 70%;
                color:#333;
            }
        }
        .chain_top{
            width: 100%;
            height: 130px;
            background-color: #fff;
            .chain_top_img {
                display: flex;
                width: 100%;
                padding:20px 10px 0 10px;
                .chain_img{
                    img {
                        width: 25px;
                        height: 25px;
                    }
                }
                .chain_top_title{
                    margin-left: 5px;
                    margin-top: 5px;
                    .chain_name{
                        font-size: 15px;
                        font-weight: 600;
                        font-family: PingFang-SC-Bold;
                    }
                }
            }
            .chain_desc{
                width: calc(100% - 20px);
                padding: 0 10px;
                color:#555;
                font-family: PingFang-SC-Regular;
                font-size: 14px;
                margin-top: 5px;
                span {
                    color: #999;
                }
                .icon{
                    text-align: center;
                    margin-top: 10px;
                    img {
                    width: 15px;
                    height: 15px;
                    }
                }
            }
        }
    }
    .parkCompany{
        width: calc(100% - 10px);
        height: auto;
        background-color: #fff;
        margin: 5px;
        padding-bottom: 15px;
        .chain_top_img {
            display: flex;
            width: 100%;
            padding:10px 10px 0 10px;
            .chain_img{
                img {
                    width: 25px;
                    height: 25px;
                }
            }
            .chain_top_title{
                margin-left: 5px;
                margin-top: 5px;
                .chain_name{
                    font-size: 15px;
                    font-weight: 600;
                    font-family: PingFang-SC-Bold;
                }
            }
        }
        .chain_list {
            display: flex;
            flex-wrap: wrap;
            margin:10px;
            .chain_item{
                background: #F5F5F5;
                border-radius: 11px;
                padding: 5px 10px;
                font-size: 13px;
                font-family: PingFang-SC-Medium;
                margin-right: 10px;
            }
            .orige{
                color:#FA871E;
                background: rgba(250, 135, 30, 0.1);
            }
        }
        .statistics_title{
            display: flex;
            flex-wrap: wrap;
            background: #F1F8FF;
            border-radius: 2px;
            padding: 5px 10px;
            font-size: 13px;
            text-align: center;
            .statistics_item{
                width: 25%;
                font-family: PingFang-SC-Bold;
            }
        }
        .statistics_number{
            display: flex;
            flex-wrap: wrap;
            border-radius: 2px;
            padding: 5px 10px;
            font-size: 13px;
            text-align: center;
            .statistics_item{
                width: 25%;
                font-family: PingFang-SC-Bold;
                span{
                    color:#FA871E;
                    font-size: 18px;
                }
            }
        }
    }
    .longtouCompany{
        width: calc(100% - 10px);
        height: 130px;
        background-color: #fff;
        margin: 5px;
        .chain_top_img {
            display: flex;
            width: 100%;
            padding:10px 10px 0 10px;
            .chain_img{
                img {
                    width: 25px;
                    height: 25px;
                }
            }
            .chain_top_title{
                margin-left: 5px;
                margin-top: 5px;
                .chain_name{
                    font-size: 15px;
                    font-weight: 600;
                    font-family: PingFang-SC-Bold;
                }
            }
        }
    }
}
</style>